<template>
    <div class="indexPage1">
        <!-- 快捷导航 -->
        <el-card class="card">
            <div class="title">
                <div class="name">快捷导航</div>
                <el-button type="primary" link class="btn">+添加快捷入口</el-button>
            </div>
            <div class="nav">
                <div class="item" v-for="(item, index) in nav" :key="index">{{ item.name }}</div>
            </div>
            <div class="title">
                <div class="name">最近访问</div>
            </div>
            <div class="record">
                <div class="item">土地资源</div>
                <div class="item">种植资源</div>
                <div class="item">气候资源</div>
            </div>
        </el-card>
        <!-- 资源搜索 -->
        <el-card class="card">
            <div class="title">
                <div class="name">资源搜索</div>
                <div class="msg">
                    <div class="tip">已开通资源 1234个</div>
                    <div class="tip">覆盖资源大类 3类</div>
                </div>
            </div>
            <div class="search">
                <div class="box">
                    <input type="text" class="input" placeholder="请输入关键词搜索资源" />
                    <img src="@/assets/images/index/search.png" class="icon" alt="" srcset="" />
                </div>
                <sxnfbtn>搜索</sxnfbtn>
                <!-- <el-button type="primary" class="btn">搜索</el-button> -->
            </div>
            <div class="record hotresource">
                <div class="tag">热门资源：</div>
                <div class="item">土地资源</div>
                <div class="item">种植资源</div>
                <div class="item">气候资源</div>
            </div>
            <div class="openList" @click="openrightmenubox">资源列表<img src="@/assets/images/icon/up.png" class="icon" alt="" srcset="" /></div>
        </el-card>
        <!-- 我的资源 -->
        <el-card class="card">
            <div class="title">
                <div class="name">我的资源</div>
            </div>
            <div class="doubletitle">我拥有的所有资源，在本模块中显示，用于快速进入相应模块功能</div>
            <div class="myresource">
                <div class="item" v-for="(item, index) in dataList" :key="index">
                    <div class="itemname">{{ item.name }}：</div>
                    <div class="resource">
                        <div class="list" v-for="(list, li) in item.list" :key="li">
                            <div>
                                <div class="name">{{ list.name }}</div>
                                <div class="explain">{{ list.explain }}</div>
                            </div>
                            <div class="num">{{ list.num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <!-- 安全预警 -->
        <el-card class="card">
            <div class="title">
                <div class="name">安全预警</div>
                <el-button type="primary" link class="btn">更多安全预警</el-button>
            </div>
            <div class="warning">
                <div class="item" v-for="(item, index) in warning" :key="index">
                    <div class="title">
                        <div>{{ item.title }}</div>
                        <div class="variety">品种：{{ item.variety }}</div>
                    </div>
                    <div class="content">
                        <img :src="item.img" alt="" srcset="" class="img" />
                        <div class="rightbox">
                            <div class="rightitem" v-for="(cont, co) in item.cont" :key="co">
                                <div class="names">{{ cont.name }}</div>
                                <div class="msg">{{ cont.msg }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <div class="gather">
            <!-- 科技中心 -->
            <el-card class="card">
                <div class="title">
                    <div class="name">科技中心</div>
                    <el-button type="primary" link class="btn">前往科技中心</el-button>
                </div>
                <div class="double">
                    <div class="box">
                        <img src="@/assets/images/index/5.png" alt="" srcset="" />
                        <div class="rights">
                            <div class="name">柑橘营养研究</div>
                            <div class="tip">柑橘营养需求模型研究，为投入品 生产指导。</div>
                        </div>
                    </div>
                    <div class="box">
                        <img src="@/assets/images/index/6.png" alt="" srcset="" />
                        <div class="rights">
                            <div class="name">柑橘病虫害研究</div>
                            <div class="tip">通过柑橘病虫害研究，推荐最小用药 和轻量化用药，提高食品安全等级。</div>
                        </div>
                    </div>
                </div>
            </el-card>
            <!-- 开发者中心 -->
            <el-card class="card">
                <div class="title">
                    <div class="name">开发者中心</div>
                    <el-button type="primary" link class="btn">前往开发者中心</el-button>
                </div>
                <div class="double">
                    <div class="box">
                        <img src="@/assets/images/index/7.png" alt="" srcset="" />
                        <div class="rights">
                            <div class="name">SDK开发包</div>
                            <div class="tip">平台采用区块链实现对农业物联网 互联互通。</div>
                        </div>
                    </div>
                    <div class="box">
                        <img src="@/assets/images/index/8.png" alt="" srcset="" />
                        <div class="rights">
                            <div class="name">API开放市场</div>
                            <div class="tip">通过平台大数据分析和模型建设，为 三方公司或机构定制化的接口服务。</div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <!-- 我是卖家 -->
        <el-card class="card">
            <div class="title">
                <div class="name">我是卖家</div>
                <el-button type="primary" link class="btn">前往营销中心</el-button>
            </div>
            <div class="marketing">
                <div class="item" v-for="(item, index) in marketing" :key="index">
                    <img :src="item.icon" class="icon" alt="" srcset="" />
                    <div class="right">
                        <div class="name">{{ item.name }}</div>
                        <div class="tip">{{ item.tip }}</div>
                    </div>
                </div>
            </div>
        </el-card>
        <!-- 为您推荐 -->
        <el-card class="card">
            <div class="title">
                <div class="name">为您推荐</div>
                <el-button type="primary" link class="btn">更多推广中心</el-button>
            </div>
            <div class="recommend">
                <div class="item" v-for="item in 4" :key="item">
                    <img src="@/assets/images/index/19.png" class="icon" alt="" srcset="" />
                    <div class="right">
                        <div class="name">推荐活动</div>
                        <div class="tip">根据决策管理推荐农资</div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
const input = ref("");
const store = useStore();
const openrightmenubox = () => {
    store.commit("setServeList", true);
};
const nav = reactive([
    {
        name: "物联网感知",
        link: "",
    },
    {
        name: "三维航拍",
        link: "",
    },
    {
        name: "三维高光谱",
        link: "",
    },
    {
        name: "VR全景",
        link: "",
    },
    {
        name: "品牌标准",
        link: "",
    },
    {
        name: "二维地图",
        link: "",
    },
]);
const warning = reactive([
    {
        title: "农事提醒",
        variety: "柑橘",
        img: require("@/assets/images/index/1.png"),
        cont: [
            {
                name: "物候期",
                msg: "花芽分化期",
            },
            {
                name: "农事安排",
                msg: "施肥、除草",
            },
        ],
    },
    {
        title: "环境警告",
        variety: "柑橘",
        img: require("@/assets/images/index/2.png"),
        cont: [
            {
                name: "气象预报",
                msg: "高温、干旱",
            },
        ],
    },
    {
        title: "生产警告",
        variety: "柑橘",
        img: require("@/assets/images/index/3.png"),
        cont: [
            {
                name: "病虫害预警",
                msg: "溃疡病、疮痂病多发",
            },
        ],
    },
    {
        title: "市场警告",
        variety: "柑橘",
        img: require("@/assets/images/index/4.png"),
        cont: [
            {
                name: "柑橘市场",
                msg: "市场供应充足、价格持续下滑",
            },
        ],
    },
]);
const marketing = reactive([
    {
        icon: require("@/assets/images/index/9.png"),
        name: "店铺",
        tip: "店铺管理及装修",
    },
    {
        icon: require("@/assets/images/index/10.png"),
        name: "生产",
        tip: "生产计划、预期及库存",
    },
    {
        icon: require("@/assets/images/index/11.png"),
        name: "商品",
        tip: "商品管理、货源及上线",
    },
    {
        icon: require("@/assets/images/index/12.png"),
        name: "客服",
        tip: "客服、接待及跟单",
    },
    {
        icon: require("@/assets/images/index/13.png"),
        name: "销售",
        tip: "订单、合同、发货及货流",
    },
    {
        icon: require("@/assets/images/index/14.png"),
        name: "推广",
        tip: "直播、内容及服务",
    },
    {
        icon: require("@/assets/images/index/15.png"),
        name: "运营",
        tip: "用户、店铺及策略",
    },
    {
        icon: require("@/assets/images/index/16.png"),
        name: "营销",
        tip: "活动、竞价及场景",
    },
    {
        icon: require("@/assets/images/index/17.png"),
        name: "财务",
        tip: "资全、对账及发票",
    },
    {
        icon: require("@/assets/images/index/18.png"),
        name: "售后",
        tip: "评价、退换货、维权及举报",
    },
]);
const dataList = [
    {
        name: "自然资源",
        list: [
            {
                name: "土地资源",
                explain: "土地权属，类型及电子围栏等",
                num: 3,
            },
            {
                name: "种植资源",
                explain: "土地附着物情况、品种、特征等信息",
                num: 1,
            },
        ],
    },
    {
        name: "社会经济",
        list: [
            {
                name: "物联网感知",
                explain: "对环境、位置、安全等感知设备",
                num: 3,
            },
            {
                name: "物联网执行",
                explain: "控制农机、环境、设备等执行器",
                num: 1,
            },
            {
                name: "通讯设备",
                explain: "通过移动、网口等上平台通讯设备",
                num: 1,
            },
            {
                name: "农业机械",
                explain: "单体作业的农业辅助生产机械",
                num: 1,
            },
            {
                name: "设备装备",
                explain: "农业生产管理系统工程",
                num: 1,
            },
        ],
    },
    {
        name: "基础设备",
        list: [
            {
                name: "批发市场",
                explain: "可利用批发市场的情况",
                num: 3,
            },
        ],
    },
    {
        name: "标准资源",
        list: [
            {
                name: "平台标准",
                explain: "我加入的标准体系及品牌的情况",
                num: 3,
            },
            {
                name: "产品标准",
                explain: "我加入的标准系统及品牌情况",
                num: 1,
            },
        ],
    },
];
</script>
<style lang="scss" scoped>
/*
总览
*/
.indexPage1 {
    .card {
        margin-bottom: 20px;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name {
                font-weight: 600;
                font-size: 14px;
                color: #333333;
            }
            .btn {
                font-size: 12px;
            }
            .msg {
                font-size: 12px;
                color: #666666;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .tip {
                    margin-left: 20px;
                }
            }
        }
        .doubletitle {
            margin-top: 10px;
            font-size: 12px;
            color: #999999;
        }
        .nav {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
            margin-bottom: 10px;
            .item {
                width: 197px;
                height: 34px;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 2px;
                line-height: 34px;
                padding: 0 11px;
                margin-right: 10px;
                margin-bottom: 10px;
                font-size: 12px;
                color: #333333;
                cursor: pointer;
                &:hover {
                    background: #23b14d;
                    color: #ffffff;
                }
            }
        }
        .record {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            .tag {
                font-size: 12px;
                color: #666666;
            }
            .item {
                font-size: 12px;
                color: #666666;
                margin-right: 17px;
                position: relative;
                cursor: pointer;
                &::after {
                    content: "";
                    position: absolute;
                    width: 1px;
                    height: 11px;
                    background: #d9d9d9;
                    top: 50%;
                    transform: translateY(-50%);
                    right: -8px;
                }
                &:last-child {
                    &::after {
                        display: none;
                    }
                }
            }
        }

        .hotresource {
            padding-bottom: 20px;
            border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
        }
        .search {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
            .box {
                height: 30px;
                border-radius: 2px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 10px;
                margin-right: 10px;
                .icon {
                    width: 16px;
                    height: 16px;
                }
                .input {
                    width: 100%;
                    border: none;
                    font-size: 12px;
                    color: #999999;
                    &::-webkit-input-placeholder {
                        font-size: 12px;
                        color: #999999;
                    }
                }
            }
        }
        .openList {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            font-size: 14px;
            cursor: pointer;
            color: #333333;
            .icon {
                width: 16px;
                transform: rotate(180deg);
                margin-left: 5px;
            }
        }
        .myresource {
            margin-top: 20px;
            .item {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                .itemname {
                    font-size: 12px;
                    color: #333333;
                    width: 60px;
                    white-space: nowrap;
                    line-height: 38px;
                }
                .resource {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-wrap: wrap;
                    .list {
                        margin-right: 10px;
                        width: 250px;
                        height: 38px;
                        background: rgba(0, 0, 0, 0.05);
                        border-radius: 2px;
                        padding: 0 10px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 10px;
                        cursor: pointer;
                        &:hover {
                            background: #23b14d;
                            color: #ffffff;
                            .name,
                            .explain {
                                color: #ffffff;
                            }
                        }
                        .name {
                            font-size: 12px;
                            color: #000000;
                        }
                        .explain {
                            font-size: 12px;
                            color: #999999;
                        }
                    }
                }
            }
        }
        .warning {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .item {
                width: calc(25% - 8px);
                height: 127px;
                border-radius: 10px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                padding: 20px;
                cursor: pointer;
                &:hover {
                    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
                }
                .title {
                    font-weight: 500;
                    font-size: 12px;
                    color: #333333;
                    .variety {
                        font-weight: normal;
                    }
                }
                .content {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 16px;
                    .img {
                        width: 74px;
                        height: 56px;
                        margin-right: 20px;
                    }
                    .rightbox {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .rightitem {
                            margin-right: 15px;
                            .names {
                                font-size: 12px;
                                color: #333333;
                                white-space: nowrap;
                                margin-bottom: 20px;
                            }
                            .msg {
                                font-size: 12px;
                                color: #666666;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
        }
        .double {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 20px;
            .box {
                width: 310px;
                height: 80px;
                border-radius: 10px 10px 10px 10px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                overflow: hidden;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                cursor: pointer;
                &:hover {
                    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
                }
                img {
                    width: 80px;
                    height: 80px;
                    margin-right: 20px;
                }
                .rights {
                    width: 195px;
                    text-align: justify;
                    .name {
                        font-size: 14px;
                        color: #333333;
                        margin-bottom: 10px;
                    }
                    .tip {
                        font-size: 12px;
                        color: #666666;
                    }
                }
            }
        }
        .marketing {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            .item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 0 30px;
                width: 19.2%;
                height: 60px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                margin-left: 10px;
                margin-bottom: 10px;
                cursor: pointer;
                &:hover {
                    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
                }
                .icon {
                    width: 32px;
                    height: 32px;
                    margin-right: 10px;
                }
                .name {
                    font-size: 12px;
                    color: #333333;
                }
                .tip {
                    font-size: 12px;
                    color: #999999;
                }
            }
        }
        .recommend {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item {
                width: 339px;
                height: 73px;
                padding: 0 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                &:hover {
                    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                }
                .icon {
                    width: 56px;
                    height: 56px;
                    margin-right: 10px;
                }
                .right {
                    .name {
                        font-size: 12px;
                        color: #333333;
                        margin-bottom: 8px;
                    }
                    .tip {
                        font-size: 12px;
                        color: #999999;
                    }
                }
            }
        }
    }
    .gather {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .card {
            width: 50%;
            &:first-child {
                margin-right: 5px;
            }
            &:last-child {
                margin-left: 5px;
            }
        }
    }
}
</style>
